<template>
  <header-view
    style="position: fixed; top: 0; width: 100%; z-index: 200"
  ></header-view>
  <div class="homeMain">
    <div class="">
      <el-carousel indicator-position="outside" height="660px">
        <el-carousel-item v-for="item in firstLevelGoods" :key="item">
          <div class="slide active">
            <div class="content">
              <span>新品上市</span>
              <h3>{{ item.spuName }}</h3>
              <p>{{ item.reason }}</p>
              <a class="btn" @click="toGoodDetail(item.spuNo)">查看详情</a>
            </div>
            <div class="image">
              <img :src="item.spuImage" alt="" />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="banner-container">
      <div class="banner" v-for="item in secondLevelGoods" :key="item">
        <div class="content2">
          <span>限时折扣</span>
          <h3>
            折扣值:
            {{
              item.discountType === "percentage"
                ? `${item.discountValue * 100}%`
                : `-${item.discountValue}`
            }}
          </h3>
          <a class="btn" @click="toGoodDetail(item.spuNo)">查看详情</a>
        </div>
        <div class="imageBox">
          <img :src="item.spuImage" alt="" />
        </div>
      </div>
    </div>
  </div>
  <footer-view></footer-view>
</template>

<script>
import { queryHomeGoods } from "@/api/goods";
export default {
  data() {
    return {
      fristLength: 0,
      secondLevelGoods: [],
      firstLevelGoods: [{}],
    };
  },

  setup() {},
  mounted() {
    this.queryHomeGoods();
    this.fristLength = this.firstLevelGoods.length;
  },
  methods: {
    toGoodDetail(spuNo) {
      this.$router.push({ name: "commodity", params: { spuNo } });
    },
    queryHomeGoods() {
      queryHomeGoods().then(({ page }) => {
        let list = page.list;
        this.firstLevelGoods = list.filter(
          (item) => item.type === "firstLevel"
        );
        this.secondLevelGoods = list.filter(
          (item) => item.type === "secondLevel"
        );
        console.log(this.firstLevelGoods);
        console.log(this.secondLevelGoods);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.homeMain {
  margin-top: 70px;
  background: #fff;
}
.slides-container {
  display: flex;
}
.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}
/* 切换动画 */
.plus-icon-enter-active {
  transition: opacity 0.5s;
}
.plus-icon-enter {
  opacity: 0;
}
.plus-icon-leave-active {
  transition: opacity 0.5s;
}
.plus-icon-leave-to {
  opacity: 0;
}
.content span {
  font-size: 25px;
  color: #779;
}
.content h3 {
  font-weight: bold;
  font-size: 50px;
  color: #244d4d;
  padding-top: 0.5rem;
}
.content p {
  font-size: 14px;
  color: #779;
  padding: 5px 0;
  line-height: 2;
  word-wrap: wrap;
}
.image {
  height: 700px;
  width: 744px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  margin: 0 40px;
}
.image img {
  width: 100%;
}
.prev,
.next {
  height: 60px;
  width: 60px;
  border: 1px solid #244d4d;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prev {
  margin: 0 60px 0 20px;
}
.next {
  margin: 0 20px 0 60px;
}
.next:hover {
  background: #244d4d;
  color: #fff;
}
.prev:hover {
  background: #244d4d;
  color: #fff;
}
// .plus-icon-enter-to {
//   opacity: 1;
// }

.banner-container {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}
.banner {
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  width: 510px;
  height: 250px;
  background-color: #f5f5f5;
  margin: 20px;
  border: 1px solid #244d4d;
  border-radius: 10px;
  .content2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 20px;
  }
  .imageBox {
    width: 320px;
    img {
      width: 100%;
    }
  }
}
.banner img:hover {
  transform: scale(1.2);
}
.btn {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: #244d4d;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.btn:hover {
  background: #516868;
  cursor: pointer;
}
.content2 span {
  font-size: 20px;
  color: #779;
}
.content2 h3 {
  font-size: 25px;
  color: #244d4d;
  padding-top: 0.5rem;
  font-weight: bold;
}
.content2 p {
  font-size: 14px;
  color: #779;
  padding: 5px 0;
  line-height: 2;
  word-wrap: wrap;
}
.banner img {
  height: 250px;
  width: 490px;
  margin: 0 10px;
}
</style>
